<template>
  <div>
    <li>
            <label for="">
                <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" name="" id="">
                <span v-show="!todo.isEdi">{{todo.title}}</span>
              <input 
              v-show="todo.isEdi" 
              type="text" 
              :value="todo.title" 
              @blur="handleBlur(todo,$event)"
              ref="inputTitle"
              >
            
            </label>
          
            <button class="btn btn-danger" @click="handDelete(todo.id)">删除</button>
             <button v-show="!todo.isEdi" class="btn btn-danger" @click="handleEdit(todo)">编辑</button>
        </li>
        
</div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
name:'Itemm',
props:['todo'],
methods:{
    // 勾选or取消勾选
  handleCheck(id){
// 通知App组件将对应todo的done值取反
// this.checkTodo(id)

// 采用全局事件总线
this.$bus.$emit('checkTodo',id)

  },
  handDelete(id){
    if(confirm('确定删除么？')){
//    this.deleteTodo(id)
// 采用全局事件总线
// this.$bus.$emit('deleteTodo',id)
pubsub.publish('deleteTodo',id)
    }

  },
//   编辑
handleEdit(todo){
    if(todo.hasOwnProperty('isEdi')){
 todo.isEdi=true
    }else{
 this.$set(todo,'isEdi',true)
    }
    // todo.isEdit=true
    //获取焦点（定时器获取）
//    setTimeout(()=>{
//     this.$refs.inputTitle.focus()
//    },200)
// $nextTick指定一个回调，在dome执行完回调

// 获取焦点
this.$nextTick(function(){
    this.$refs.inputTitle.focus()
})

},
// 失去焦点回调，真正修改逻辑
handleBlur(todo,e){
   todo.isEdi=false
//    当编辑时，输入为空时，提示
   if(!e.target.value.trim()) return alert("输入不能为空")
   this.$bus.$emit('updateTodo',todo.id,e.target.value)
}



  

}
}
</script>

<style>
li{
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}
li label{
    float: left;
    cursor: pointer;
}
li label li input{
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;

}
li button{
    float: right;
    display: none;
    margin-top: 3px;
}
li:before{
    content: initial;
}
li:last-child{
    border-bottom: none;
}
li:hover{
    background-color: gray;
}
li:hover button{
    display: block;
    /* background-color: gray; */
}
input{
    outline:none;
}
</style>